<template>
  <div class="goods-detail">
    <ZJHeader class="detail-header">
      <template #left>
        <div class="header-left">
          <van-icon class="left-icon" @click="$router.back()" name="arrow-left"/>
          <span class="left-word">商品详情</span>
        </div>
      </template>
    </ZJHeader>
    <div class="scroll-limit">
      <ZJScrollView
          :wrapperInfo="scrollWrapperInfo"
          :wrapperConfig="scrollWrapperConfig"
          ref="scrollViewRef"
      >
        <template #content>
          <ZJSwiper
              class="detail-banner"
              :swiperItems="bannerImages"
              :swiperConfig="swiperConfig"
          />
          <div class="detail-info">
            <div class="info-main">
              <p class="price">￥{{ noSpecShowPrice }}</p>
              <div class="sale">
                <span class="shop-tag">乐享</span>
                <span class="month-sale">月销 {{ goodsModule.currentGoodsDetail.sale }}</span>
              </div>
              <p class="name">
                {{ goodsModule.currentGoodsDetail.name }}
              </p>
            </div>
            <div class="info-sku"></div>
          </div>
          <van-divider>商品详情</van-divider>
          <div v-html="goodsModule.currentGoodsDetail.detail">
          </div>
        </template>
      </ZJScrollView>
    </div>
    <!--  立即购买  -->
    <van-submit-bar class="submit-bar">
      <template #button v-if="isHasStock">
        <button class="button-car" @click="handleSpecDialogShow">加入购物车</button>
        <button class="button-submit" @click="handleOrderSubmit">立即购买</button>
      </template>
      <template v-else #button>
        <van-button type="danger" round disabled>暂无库存</van-button>
      </template>
    </van-submit-bar>
    <!--  加入购车和立即购买弹出页面的制作  -->
    <ChooseSpec ref="chooseSpecRef" v-if="isSpecGoods"/>
    <ChooseNoSpec ref="chooseNoSpecRef" v-else/>
  </div>
</template>

<script setup lang="ts">
import {computed, nextTick, onMounted, provide, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import useGoodsModule from "@/store/goodsModule";
import ZJSwiper from "@/components/ZJSwiper/ZJSwiper.vue";
import {
  swiperConfig,
  scrollWrapperConfig,
  scrollWrapperInfo
} from './config'
import ZJHeader from "@/components/ZJHeader/ZJHeader.vue";
import ZJScrollView from "@/components/ZJScrollView/ZJScrollView.vue";
import ChooseSpec from "@/views/ZJGoods/GoodsDetail/ChooseSpec/ChooseSpec.vue";
import ChooseNoSpec from "@/views/ZJGoods/GoodsDetail/ChooseNoSpec/ChooseNoSpec.vue";
import {Toast} from "vant";

const route = useRoute()
const router = useRouter()
const scrollViewRef = ref<InstanceType<typeof ZJScrollView>>()
const goodsModule = useGoodsModule()
// 没规格显示的价格
const noSpecShowPrice = computed(() => {
  if (isSpecGoods.value) {
    const list = goodsModule.currentGoodsSpec?.sysProductSpecsVoList
    if (list?.length) {
      return list[0].productPrice
    }
  } else {
    return goodsModule.currentGoodsDetail.price
  }
})
// 加入购物车按钮的点击
const chooseSpecRef = ref<InstanceType<typeof ChooseSpec>>()
const chooseNoSpecRef = ref<InstanceType<typeof ChooseNoSpec>>()
// 当前点击的立即购买还是加入购物车
const currentMode = ref<"shopCar" | "purchase">("shopCar")
const handleSpecDialogShow = () => {
  currentMode.value = "shopCar"
  if (!isHasStock.value) return // 没库存的话点击也没用
  if (isSpecGoods.value) { // 有规格的商品
    chooseSpecRef.value.isShowShopCar = true
  } else {
    chooseNoSpecRef.value.isShowShopCar = true
  }
}

const isHasStock = ref(true)
const bannerImages = ref()
onMounted(async () => {
  const toast = Toast.loading({
    message: "加载中...",
    duration: 6000
  })
  const currentGoodsId = route.params.goodsId
  if (!currentGoodsId) {
    return
  }
  // 设置商品信息
  await goodsModule.setGoodsDetailAction({
    goodsId: parseInt(currentGoodsId as string)
  })
  // 设置商品规格
  await goodsModule.setGoodsSpecAction({
    goodsId: goodsModule.currentGoodsDetail?.id,
    categoryId: goodsModule.currentGoodsDetail?.categoryId
  })
  // 判断是否有库存
  const list = goodsModule.currentGoodsSpec?.sysProductSpecsVoList
  if (!list?.length) { // 没库存，立即购买和购物车按钮都不显示了
    isHasStock.value = false
  } else {  // 判断是否是规格商品
    if (JSON.stringify(list[0].productSpecs) === "{}") {
      isSpecGoods.value = false
    }
  }
  if (goodsModule.currentGoodsDetail.sysPhotoList) {
    bannerImages.value = goodsModule.currentGoodsDetail.sysPhotoList.map(item => {
      return {
        key: item.id,
        imgUrl: item.photoUrl
      }
    })
  }
  await nextTick(() => {
    scrollViewRef.value.bs.refresh()
  })
  toast.clear()
})

// 是否是规格商品
const isSpecGoods = ref(true)

// 跳到订单页面
const handleOrderSubmit = () => {
  currentMode.value = "purchase"
  if (!isHasStock.value) return // 没库存的话点击也没用
  if (isSpecGoods.value) { // 有规格的商品
    chooseSpecRef.value.isShowShopCar = true
  } else {
    chooseNoSpecRef.value.isShowShopCar = true
  }
}

provide("currentMode", currentMode)
</script>

<style scoped lang="less">
@import "src/assets/css/variable";
@import "src/assets/css/mixins";

.goods-detail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: @theme-grey-color;

  .detail-header {
    background: #F2F2F2;

    .header-left {
      font-size: 22px;
      color: #333;
      display: flex;
      align-items: center;

      .left-icon {
        font-size: 18px;
      }

      .left-word {
        font-size: 16px;
      }
    }
  }

  .scroll-limit {
    height: calc(100% - 50px - 60px);
    overflow: hidden;

    .detail-banner {
      height: 250px;

      .van-swipe-item {
        background-color: #f00;
      }
    }

    .detail-info {
      padding: 8px;

      .info-main {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding: 10px;
        border-radius: 8px;

        .price {
          color: #C81C22;
          font-size: 18px;
          margin-bottom: 10px;
        }

        .sale {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;

          .shop-tag {
            padding: 3px 6px;
            background-color: #f00;
            border-radius: 20px;
            color: #fff;
            font-size: 14px;
          }

          .month-sale {
            color: #999;
            font-size: 14px;
          }
        }

        .name {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 10px;
        }
      }
    }
  }

  .submit-bar {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    button {
      padding: 10px 20px;
      border: none;
      font-weight: 600;
      height: 40px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      box-sizing: border-box;
    }

    .button-car {
      border-radius: 20px 0 0 20px;
      background: linear-gradient(to right, #FFC507, #FF9405);
    }

    .button-submit {
      border-radius: 0 20px 20px 0;
      background: linear-gradient(to right, #FD7600, #FD4A07);
    }
  }

}
</style>
